<!-- <template>
  <div class="web-container">
    <div class="rightBox">

      <div class="mainBox">
        <div id="chart" class="echarsBox"></div>
        <div id="chartWjn" class="echarsBox"></div>
      </div>
      <div class="mainBox">
        <div id="piePay" class="echarsBox"></div>
        <div id="pieWarning" class="echarsBox"></div>
      </div>


      <el-dialog title="单位参与交费情况统计" :visible.sync="dialog" width="850px" >
        <el-tabs v-model="orgType" tab-position="left" @tab-click="handleClick">
            <el-tab-pane label="已参与" name="0" v-loading='showLoading'>
              <div class="unList" v-if="orgType == 0">
                <div class="unBox" v-for="(item,index) in unApplyList" :key="index">
                  <el-tag type="success" size='medium'> {{item.orgName}} </el-tag>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="未参与" name="1" v-loading='showLoading'>
              <div class="unList" v-if="orgType == 1">
                <div class="unBox" v-for="(item,index) in unApplyList" :key="index">
                  <el-tag type="warning" size='medium'> {{item.orgName}} </el-tag>
                </div>
              </div>
            </el-tab-pane>
        </el-tabs>

      </el-dialog>

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: "Addr",
    data() {
      return {
        tabType:'',//10未交纳 1补交 0预交
        titleTab:'',
        // 列信息
        columns: [


        ],

        billDate:'',//缴费期
        unApplyData:{},//参与情况
        dialog:false,//未参加单位弹窗
        unApplyList:[],//未参加单位列表
        drawer:false,//详细数据抽屉
        drawerTotal:false,//统计报表抽屉
        drawerAttend:false,//未参加线上交纳党费人员情况
        time: '',
        newDate: '',
        nowYear: '',
        nowMonth: '',
        orgId: '',
        queryParams: {
          time: '',
          orgId: null,
          type:1
        },
        orgName: {},
        tableData: [],
        trends: [], //党费交纳趋势
        overdu: [], //逾期未交趋势
        rate: {
          notNum: 0,
          payNum: 0
        }, //当月党费交纳率
        warn: {}, //月党费交纳预警人次
        typeList:[
          {name:'党费交纳情况总表',id:1},
          {name:'工委直属党组织党费交纳情况表',id:2},
        ],
        dayData:'',
        roles:'dzb',
        pageOrgId:'',
        tableLoading:false,
        orgType:'0',//0参与交费 1未参与交费
        showLoading:false,
      }
    },
    created() {
      this.orgName = this.$store.state.user.orgName;
      this.orgId = this.$store.state.user.orgId;
      this.queryParams.orgId = this.$store.state.user.orgId;
    },
    mounted() {
      this.initPage()
    },
    computed: {

    },
    methods: {
      handleClick(tab, event) {
        this.partyOrgList(tab.index)
      },

      //切换年份
      changeYear(e) {
        this.init()
      },
      //获取月度党费交纳统计
      init() {
        this.tableLoading = true;
        getStatistical(this.queryParams).then(response => {
          this.tableData = response.data;
          this.tableLoading = false;
        });
      },
      //获取图表数据
      initPage() {
        var queryParams = {
          orgId: this.orgId,
          time: this.nowYear
        }
        var that = this;
        setTimeout(function() {
          that.initChart()
          that.initChartWjn()
          that.initPiePay()
          that.initPieWarning()
        }, 200)
      },



      //党费交纳趋势报表图
      initChart() {
        const chart = echarts.init(document.getElementById('chart'))
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          title: {
            text: '库存支出月度统计',
            left: 'center',
            bottom: 0,
            textStyle: {
              color: '#555',
              fontSize: 15
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var relVal = params[0].marker + params[0].name + '支出合计：' + params[0].data + '万元'
              return relVal;
            },
          },
          color: 'rgba(42, 97, 255,0.8)',
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value',
            max: 50 // 动态设置最大值
          },
          series: [{
            data: [5, 5, 14, 16, 21, 19, 15, 9, 8, 31, 22,25],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },

          }],

        };

        chart.setOption(option)
      },
      //逾期未交趋势报表图
      initChartWjn() {
        const chart = echarts.init(document.getElementById('chartWjn'))
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },

          },
          title: {
            text: '油料消耗趋势',
            left: 'center',
            bottom: 0,
            textStyle: {
              color: '#555',
              fontSize: 15
            },
          },
          color: '#2a61ff',
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var relVal = params[0].marker + params[0].name + '油料消耗：' + params[0].data + '吨'
              return relVal;
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value',
            max: 50 // 动态设置最大值
          },
          series: [{
            data: [5, 5, 14, 16, 21, 19, 15, 9, 8, 31, 22,25],
            type: 'line',
            areaStyle: {},
            label: { // 展示具体柱状图的数值
              show: true
            },
            markPoint: { // 设置最大值和最小值
              data: [{
                type: "max",
                name: "最大逾期",
              }, ],
            },

          }],

        };

        chart.setOption(option)
      },

      //当月党费交纳率
      initPiePay() {
        const chart = echarts.init(document.getElementById('piePay'))
        const option = {
          title: {
            text: '库存出库占比',
            left: 'center',
            bottom: 0,
            textStyle: {
              color: '#555',
              fontSize: 15
            },
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },

          series: [{
            name: '消耗占比（%）',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 15,
                name: '物料'
              },
              {
                value: 49,
                name: '油料'
              },
              {
                value: 26,
                name: '备料'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };

        chart.setOption(option)
      },
      //当月党费交纳预警人次
      initPieWarning() {
        const chart = echarts.init(document.getElementById('pieWarning'))
        const option = {
          title: {
            text: '库存入库占比',
            left: 'center',
            bottom: 0,
            textStyle: {
              color: '#555',
              fontSize: 15
            },
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [{
            name: '消耗占比（%）',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 15,
                name: '物料'
              },
              {
                value: 49,
                name: '油料'
              },
              {
                value: 26,
                name: '备料'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };

        chart.setOption(option)
      },

      roundedNumber(value) {
        const rounded = Math.round(value);
        if (rounded % 5 === 0) {
          return rounded;
        } else if (rounded % 10 === 0) {
          return rounded;
        } else {
          const mod5 = rounded % 5;
          const mod10 = rounded % 10;
          if (mod5 <= 2) {
            return rounded - mod5;
          } else {
            return rounded + (5 - mod5);
          }
        }
      },

      rowStyle() {
        return "text-align:center";
      },





    }
  };
</script>

<style lang='scss' scoped>
  .tableBox {
    margin-top: 20px;
  }
  .reportTip{
    padding-top: 15px;color: #555;
    .acNone{}
    span{color: #c40001;font-weight: bold;margin: 0 1px;font-size: 16px;}
  }
  .toolBarBox{
    position: absolute;
    right: 0;bottom: 5px;
  }
  .el-form-item{
    margin-bottom: 0 !important;
  }
  .tit {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: '#555';
    font-size: 15px;
  }

  .echarsBox {
    width: 50%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tableTit {
    a {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .web-container {
    margin-top: 15px;
    height: calc(100vh - 116px);
    width: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    .acNone{}
    .leftTree {
      background: #fff;
      overflow: hidden;
      width: 300px;
      height: 100%;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .rightBox {
      overflow-y: auto;
      background: #fff;
      width: 100% ;
      height: 100%;
      border-radius: 5px;
      padding: 15px 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      position: relative;
      .acNone{}
      .mainBox {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 20px;
        justify-content: space-between;
        align-items: center;
      }

    }
  }

  .textWidth {
    width: 100%;
    display: flex;
    align-items: flex-start;
    .acNone{}
    .el-form-item__content {
      margin-left: 10px !important;
      width: calc(100% - 130px) !important;
    }
  }

  .itemWidth {
    width: 32%;
    display: flex;
    align-items: center;
    .acNone{}
    .el-form-item__label {
      width: 120px !important;
      line-height: normal;
    }

    .el-form-item__content {
      margin-left: 10px !important;
      width: calc(100% - 130px) !important;
    }
  }

  .selectWidth {
    width: 100%;
  }
  .el-tag{
    font-size: 15px !important;
  }
  .unList{
    display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;
  }
  .unBox{margin-bottom: 10px;margin-right: 10px;}
  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-bottom: 5vh !important;
  }

  ::v-deep .el-dialog {
    margin-top: 5vh !important;
  }
  ::v-deep .el-dialog__body {
    padding: 20px !important;
  }
</style> -->
